<template>
  <el-dialog
      v-model="open"
      :close-on-click-modal="false"
      title="新增"
      width="680"
      draggable append-to-body destroy-on-close>

    <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="100">

      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" show-word-limit maxlength="20" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="地址" prop="path">
        <el-input v-model="formData.path" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="标识" prop="sign">
        <el-input v-model="formData.sign" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="格式" prop="format">
        <el-select v-model="formData.format" placeholder="请选择" style="width: 500px">
          <el-option label="png" value="png"/>
          <el-option label="jpg" value="jpg"/>
        </el-select>
      </el-form-item>
      <el-form-item label="图层" prop="layer">
        <el-input v-model="formData.layer" placeholder="请输入" style="width: 500px"/>
      </el-form-item>
      <el-form-item label="加载方式" prop="loading_method">
        <el-select v-model="formData.loading_method" placeholder="请选择" style="width: 500px">
          <el-option label="tiles" value="tiles"/>
          <el-option label="tms" value="tms"/>
          <el-option label="wms" value="wms"/>
        </el-select>
      </el-form-item>
      <el-form-item label="数据格式" prop="data_format">
        <el-select v-model="formData.data_format" placeholder="请选择" style="width: 500px">
          <el-option label="tiles" value="tiles"/>
          <el-option label="tms" value="tms"/>
          <el-option label="wms" value="wms"/>
        </el-select>
      </el-form-item>

      <el-form-item label="坐标系" prop="coordinate_system">
        <el-select v-model="formData.coordinate_system" placeholder="请选择" style="width: 500px">
          <el-option label="WGS1984" value="WGS1984"/>
          <el-option label="CGCS2000" value="CGCS2000"/>
          <el-option label="ESPG:4326" value="ESPG:4326"/>
          <el-option label="ESPG:4490" value="ESPG:4490"/>
        </el-select>
      </el-form-item>

      <el-form-item label="图层顺序" prop="layer_order">
        <el-input-number v-model="formData.layer_order" max="100" placeholder="请输入" style="width: 500px"/>
      </el-form-item>

      <el-form-item label="图层SQL" prop="layer_sql">
        <el-input v-model="formData.layer_sql" show-word-limit max="500" placeholder="请输入" style="width: 500px"
                  :rows="3" type="textarea"/>
      </el-form-item>

      <el-form-item label="初始化状态" prop="is_view">
        <el-select v-model="formData.is_view" placeholder="请选择" style="width: 500px">
          <el-option label="显示" :value="1"/>
          <el-option label="隐藏" :value="0"/>
        </el-select>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button @click="()=>{open=false}">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </template>

  </el-dialog>
</template>

<script setup>
//open 特殊处理双向绑定
import {apiLayerAdd} from "@/api/index.js";
import $modal from "@/util/element/modal.js";
import {formRules} from "@/view/gis/layer/option.js";

const open = defineModel("open", {default: false})

//普通 props
const props = defineProps({
  data: Object,
  dictValue: {
    default: [],
    type: Array
  },
})

//回调通知
const emit = defineEmits(['ok'])

const {proxy} = getCurrentInstance();

let optionKey = {
  loading: false,
  dictCode: 'enuCommonStatus,enuUserMtAuth',
  dictCodeOption: [],
  openDialog: false,
  tableData: [],
  selectIds: [],
  selectNames: [],
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
  tableHeight: 0,
}

const formKey = {
  name: "",
  path: "",
  sign: "",
  format: "",
  layer: "",
  loading_method: "",
  data_format: "",
  coordinate_system: "",
  layer_order: "",
  is_view: "",
}

let formData = reactive(formKey);
let option = reactive(optionKey);

//页面加载完成回调
onMounted(() => {
  //// console.log("Dialog onMounted")
  //// console.log("open.value", open.value)
  //// console.log("props.data", props.data)
  //// console.log("props.dictValue", props.dictValue)
})

onUnmounted(() => {
  //// console.log("Dialog onUnmounted")
});

function submit() {
  proxy.$refs["formDataRef"].validate(valid => {
    if (valid) {
      apiLayerAdd(formData).then(res => {
        if (res.code != 200) {
          $modal.error(res.msg);
          return;
        }

        $modal.success();
        emit('ok', {id: 10})
        open.value = false
      })
    }

  });


}
</script>

<style scoped lang="scss">

</style>
